/* Setting up the Pen. */
body {
  background-color: #222;
}

.lightsaber {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85vw;
  height: 10vw;
  transform: translate3d(-50%, -50%, 0) rotate(-3deg);
}
.lightsaber:hover .blade {
  width: 0;
}
.lightsaber .blade {
  position: absolute;
  top: 0.5vw;
  left: 25vw;
  width: 60vw;
  height: 3vw;
  background-color: #eeeeff;
  border-radius: 0 5vw 5vw 0;
  border-top-right-radius: 10vw 5vw;
  border-bottom-right-radius: 10vw 5vw;
  box-shadow: inset 0.3vw 0 1vw #55eeff, 2vw 0 5vw #0099ff;
  transition: width 0.15s ease-in-out;
}
.lightsaber .blade .handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 32vw;
  height: 4vw;
  border-radius: 0.2vw;
  border-top-right-radius: 1vw;
  border-bottom-right-radius: 8vw 5vw;
  background-color: #999;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 100%);
  box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.7), inset 0 0.25vw 0.5vw rgba(0, 0, 0, 0.5);
}
.lightsaber .blade .handle:before {
  content: "";
  position: absolute;
  top: 0;
  left: -0.25vw;
  width: 0.5vw;
  height: 4vw;
  background-color: #555;
  border-radius: 50%;
  box-shadow: inset 0 0 0.5vw rgba(0, 0, 0, 0.5);
}
.lightsaber .blade .handle .button {
  position: absolute;
  top: -0.5vw;
  left: 25vw;
  width: 1vw;
}
.lightsaber .blade .handle .button:before {
  z-index: 1;
  content: "";
  position: absolute;
  width: 1vw;
  height: 0.4vw;
  border-radius: 0.1vw 0.1vw 40% 40%;
  background-color: red;
  box-shadow: inset 0 0.1vw 0.1vw rgba(255, 255, 255, 0.5), 0 0.1vw 0.1vw rgba(255, 255, 255, 0.5);
}
.lightsaber .blade .handle .button:after {
  z-index: 0;
  content: "";
  position: absolute;
  left: -0.25vw;
  top: 0.25vw;
  width: 1.5vw;
  height: 0.8vw;
  border-radius: 0.1vw 0.1vw 40% 40%;
  background-color: #666;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0) 100%);
  box-shadow: inset 0 -0.1vw 0.25vw rgba(0, 0, 0, 0.6), inset 0 0.1vw 0.1vw rgba(255, 255, 255, 0.8);
}
.lightsaber .blade .handle .guard {
  position: absolute;
  top: -1.5vw;
  left: 27vw;
  width: 1.25vw;
  height: 1.5vw;
  background-color: #444;
  border-radius: 25% 25% 0 0;
  box-shadow: inset 0.1vw 0.1vw 0 rgba(255, 255, 255, 0.1);
}
.lightsaber .blade .handle .guard:after {
  content: "";
  position: absolute;
  top: 0.25vw;
  left: 0.25vw;
  width: 1.25vw;
  height: 1.5vw;
  background-color: #666;
  border-radius: 25% 25% 0 0;
  box-shadow: inset 0.1vw 0.1vw 0 rgba(255, 255, 255, 0.1);
}
.lightsaber .blade .handle .knobs {
  position: absolute;
  top: 0;
  left: 25vw;
}
.lightsaber .blade .handle .knobs:before, .lightsaber .blade .handle .knobs:after {
  content: "";
  position: absolute;
  top: 3.5vw;
  left: 0;
  width: 1vw;
  height: 0.5vw;
  background-color: #222;
  border-radius: 50% 50% 0.1vw 0.1vw;
}
.lightsaber .blade .handle .knobs:after {
  left: 2.5vw;
}
.lightsaber .blade .handle .divider {
  position: absolute;
  top: 0vw;
  left: 26.25vw;
  width: 0.5vw;
  height: 4vw;
  border-radius: 50%;
  box-shadow: 0.05vw 0 0 rgba(0, 0, 0, 0.5), 0.15vw 0 0 rgba(255, 255, 255, 0.2);
}
.lightsaber .blade .handle .grip {
  position: absolute;
  left: 1vw;
  top: -0.5vw;
  width: 10vw;
  height: 5vw;
  background-image: linear-gradient(180deg, #111 0%, #111 25%, transparent 25%, transparent 35%, #111 35%, #111 75%, transparent 75%, transparent 85%, #111 85%, #111 100%);
  border-radius: 0.5vw;
}
.lightsaber .blade .handle .lever {
  position: absolute;
  top: 0;
  left: 12vw;
  width: 7vw;
  height: 4vw;
}
.lightsaber .blade .handle .bands:before, .lightsaber .blade .handle .bands:after {
  content: "";
  position: absolute;
  top: -0.1vw;
  left: 0;
  width: 1.5vw;
  height: 100%;
  background-color: #666;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.2));
  box-shadow: -0.1vw 0 0 rgba(0, 0, 0, 0.5), 0.1vw 0 0 rgba(0, 0, 0, 0.2);
}
.lightsaber .blade .handle .bands:after {
  left: 5.25vw;
}
.lightsaber .blade .handle .jut-out {
  position: absolute;
  top: 2.25vw;
  left: 0.25vw;
  width: 7vw;
  height: 0.5vw;
  background-color: #999;
  transform: skewX(45deg);
  box-shadow: -0.1vw -0.1vw 0.1vw rgba(0, 0, 0, 0.5);
}
.lightsaber .blade .handle .switch {
  position: absolute;
  top: 2vw;
  left: 0;
}
.lightsaber .blade .handle .switch:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5vw;
  width: 0.5vw;
  height: 1.75vw;
  background-color: #333;
  transform: skewY(45deg);
  box-shadow: -0.1vw -0.1vw 0.1vw rgba(0, 0, 0, 0.5);
}
.lightsaber .blade .handle .switch:after {
  content: "";
  position: absolute;
  left: 0.5vw;
  top: 0.75vw;
  width: 7vw;
  height: 1.75vw;
  background-color: #594125;
  background-image: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0.75) 60%, rgba(0, 0, 0, 0.75) 80%, transparent 100%);
  background-size: 0.5vw 1.75vw;
  box-shadow: inset 0.1vw 0.1vw 0 #666, inset -0.1vw -0.1vw 0 #666, inset 0.25vw 0.25vw 0.1vw rgba(0, 0, 0, 0.5), inset -0.25vw -0.25vw 0.1vw rgba(255, 255, 255, 0.1);
}